<template>
	<view class="user-page">
		<view class="user-header">
			<image class="avatar" src="/static/project/avatar.png" mode="widthFix"></image>
			<text class="welcome-text">HI~欢迎回来</text>
			<button class="login-btn" @click="gotoLogin" v-if="!isLogin">登录</button>
			<text class="user-name " v-else>{{ userName }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '登录', 
				isLogin: false
			};
		},
		onLoad(options) {
			console.log('onLoad option user' + JSON.stringify(options));
		},
		onShow() {
			console.log('onShow');
			const app = getApp();
			const globalData = app.globalData;
			this.isLogin = globalData.isLogin || false;
			this.userName = globalData.userName || uni.getStorageSync('ACCOUT') || ' ';
			if (this.isLogin) {
				uni.setTabBarItem({
					index: 3,
					text: '我的'
				});
				uni.hideTabBarRedDot({
					index: 3
				});
			} else {
				uni.setTabBarItem({
					index: 3,
					text: '未登录'
				});
				console.log('onShow No Logined user');
			}
		},
		onHide() {
			console.log('Mini hide...');
		},
		methods: {
			gotoLogin() {
				uni.navigateTo({
					url: "/pages/tabBar/login/login"
				});
			},
			setting() {
				uni.setTabBarItem({
					index: 3
				});
			}
		}
	};
</script>

<style>
	.user-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.user-header {
		position: relative;
		height: 220rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.welcome-text {
		font-size: 34rpx;
		font-weight: bold;
		position: absolute;
		top: 40rpx;
	}

	.login-btn {
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		background-color: red;
		color: #f5f5f5;
		font-size: 28rpx;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
	}

	.user-name {
		margin-left: auto;
		font-size: 30rpx;
		color: #333;
		background-color: red;
		color: #f5f5f5;
		font-size: 28rpx;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
	}
</style>